<template>
	<view class="main">
		<view class="header">
			<!-- tabBar -->
			<topCommonTitleBar class="topBar" title="模板专区" :statePerchHeight="'var(--status-bar-height)'"
				backgroundColor="#0157FC" arrow="white" />
			<view class="perch"></view>
			<!-- 顶部搜索 -->
			<view class="top_search">
				<u-search placeholder="输入您想了解的内容" @blur="search" v-model="keyword" bgColor="#fff" :showAction="false" height="70rpx"></u-search>
				<!-- 热搜 -->
				<view class="hot_search flex_align">
					<image class="hot_icon" src="/static/img/template/hot_icon.png" mode="scaleToFill" />
					<view class="line"></view>
					<view class="hot_ul flex_between">
						<view class="hot_li" v-for="(item, index) in hotList" :key="index">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="torso">
			<view class="navList flex_between">
				<view class="nav_li flex_col" v-for="(item, index) in navList" :key="index">
					<image class="nav_icon" :src="item.icon" mode="scaleToFill" />
					<view class="nav_title">{{ item.name }}</view>
				</view>
			</view>
			<image class="nav_tag" src="/static/img/template/tag.png" mode="scaleToFill" />
		</view>
		<view class="perch_line"></view>
		<view class="hot_recommend">
			<view class="hot_title">最热模板</view>
				<templateList :list="hotTemplateList" :loadMoreStatus="loadMoreStatus"></templateList>
		</view>

		<!-- 加载页 -->
		<u-loading-page :loading="isLoading" image="/static/img/template/loading.gif" loadingText=''>
		</u-loading-page>
	</view>
</template>

<script>
import { getHotSearchList, getKindList, getModelList } from '@/api/template'
import templateList from '@/components/templateList/templateList.vue'
export default {
	data() {
		return {
			keyword: '',//搜索
			hotList: [], //热搜
			navList: [],//导航
			idToIcon: {
				1: '/static/img/template/nav_1.png',
				2: '/static/img/template/nav_2.png',
				3: '/static/img/template/nav_3.png',
				12: '/static/img/template/nav_4.png',
				11: '/static/img/template/nav_5.png',
				8: '/static/img/template/nav_6.png'
			},//导航图标
			hotTemplateList: [],//最热模板
			query: {
				page: 1,
				pagesize: 10
			},
			perchHeight: '',
			isLoading: false,
			loadMoreStatus: 'more',
		};
	},
	components: {
		templateList
	},
	methods: {
		// 获取热搜
		getHotList() {
			getHotSearchList().then((res) => {
				this.hotList = res.data;
			});
		},
		//获取导航列表
		getNavList() {
			getKindList().then(res => {
				let arr = Object.values(res.data);
				arr.forEach(item => {
					item.icon = (item.id in this.idToIcon) ? this.idToIcon[item.id] : '';
					if (item.id === 8) {
						item.name = item.name.slice(0, 4);
					}
				});
				this.navList = arr;
			})
		},

		//获取最热模板
		getHotTemplateList() {
			this.isLoading = true;
			getModelList({
				is_hot: 1,
				...this.query
			}).then(res => {
				this.isLoading = false;
				if (res.code == 1) {
					var arr = res.data.list
					if (this.query.page == 1) {
						this.hotTemplateList = []
					}
					if (arr.length >= this.query.pagesize) {
						this.loadMoreStatus = 'more'
					} else {
						this.loadMoreStatus = 'noMore'
					}
					this.hotTemplateList = [...this.hotTemplateList, ...arr]
					uni.stopPullDownRefresh()
				} else {
					uni.stopPullDownRefresh()
					this.$tools.showToast(res.msg);
					this.loadMoreStatus = 'noMore'
				}

			})
				.catch((e) => {
					uni.stopPullDownRefresh()
					this.isLoading = false;
				})
		},
	},
	//触底加载下一页
	onReachBottom() {
		if (this.loadMoreStatus == 'more') {
			this.query.page++;
			this.getHotTemplateList();
		}
	},

	onLoad() {
		this.getHotList();
		this.getNavList();
		this.getHotTemplateList();
	},
}
</script>

<style lang="scss">
.main {
	.header {
		.topBar {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999999;
		}

		.perch {
			height: calc(var(--status-bar-height) + 80rpx);
		}

		.top_search {
			background: #0157FC;
			padding: 30rpx;
			height: 240rpx;

			.hot_search {
				margin-top: 30rpx;

				.hot_icon {
					width: 52rpx;
					height: 24rpx;
				}

				.line {
					height: 18rpx;
					width: 1rpx;
					background: #fff;
					margin: 0 30rpx;
				}

				.hot_ul {
					width: calc(100% - 53rpx);

					.hot_li {
						font-size: 24rpx;
						color: #B3CDFF;
						line-height: 24rpx;
					}
				}

			}
		}
	}

	.torso {
		padding: 0 30rpx;
		margin-top: -50rpx;
		z-index: 999;
		width: 100%;
		border-radius: 40rpx 40rpx 0 0;
		background: #fff;

		.navList {
			padding-top: 40rpx;

			.nav_li {
				align-items: center;

				.nav_icon {
					width: 72rpx;
					height: 72rpx;
				}

				.nav_title {
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #333333;
					line-height: 24rpx;
				}
			}
		}

		.nav_tag {
			margin: 46rpx auto 0;
			display: block;
			width: 608rpx;
			height: 60rpx;
		}
	}

	.perch_line {
		width: 100vw;
		height: 1rpx;
		background: #E2E2E2;
		margin-top: 47rpx;
	}

	.hot_recommend {
		margin-top: 48rpx;
		padding: 0 30rpx;

		.hot_title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 24rpx;
		}
	}
}

/deep/.u-loading-page__warpper__loading-icon__img {
	width: 800rpx !important;
	height: 600rpx !important;
}
</style>
